<template>
  <div class="singer-detail">
    <music-list
      :songs="songs"
      :pic="pic"
      :title="title"
      :loading="loading"
    ></music-list>
  </div>
</template>

<script setup>
  import { defineProps, onMounted, ref, computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { getSingerDetail } from '@/service/singer'
  import { processSongs } from '@/service/song'
  import MusicList from '@/components/music-list/music-list.vue'
  import storage from 'good-storage'
  import { SINGER_KEY } from '@/assets/js/constant'

  const route = useRoute()
  const router = useRouter()
  const songs = ref([])
  const loading = ref(true)

  const props = defineProps({
    singer: Object
  })

  const computedSinger = computed(() => {
    let ret = null
    const singer = props.singer
    if (singer) {
      ret = singer
    } else {
      const cachedSinger = storage.session.get(SINGER_KEY)
      if (cachedSinger && cachedSinger.mid === route.params.id) {
        ret = cachedSinger
      }
    }
    return ret
  })

  const cSinger = computedSinger.value
  const pic = computed(() => cSinger && cSinger.pic)
  const title = computed(() => cSinger && cSinger.name)

  onMounted(async () => {
    if (!cSinger) {
      const path = route.matched[0].path
      router.push({
        path
      })
      return
    }
    const result = await getSingerDetail(cSinger)
    songs.value = await processSongs(result.songs)
    loading.value = false
  })
</script>

<style scoped lang="scss">
  .singer-detail {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: $color-background;
  }
</style>
